// 面包屑组件
import React, { useState, useEffect } from 'react';
import { IRouteComponentProps } from 'umi';
import { Breadcrumb } from 'antd';
import { matchRoutes } from 'react-router-config';
import lodash from 'lodash';

// routes 为 最终 编译之后拿到的 routes
const AppBreadCrumb = ({ routes, location }: IRouteComponentProps) => {
  const [paths, setPaths] = useState([]);

  useEffect(() => {
    setPaths(matchRoutes(routes, location.pathname));
  }, [location.pathname]);

  console.log(paths);

  return (
    <Breadcrumb>
      {paths?.map((item) => (
        <Breadcrumb.Item key={item.route.path}>
          {lodash.isFunction(item.route.bread)
            ? item.route.bread(item)
            : item.route.bread}
        </Breadcrumb.Item>
      ))}
    </Breadcrumb>
  );
};

export default AppBreadCrumb;
